<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="__CSS__/one_shot/main.css">
    <script src="__JS__/one_shot/audio.js"></script>
    <script>
        // 音乐
        if (browser.versions.weixin) {
            //解决部分不能播放音效的手机
            document.addEventListener("WeixinJSBridgeReady", function () {
                initAudio();
            }, false);
        } else {
            initAudio();
        }

        function initAudio() {
            bgmAudio.init("__MUSIC__/one_shot/bg.mp3", true);
            bgmAudio.play();
        }
    </script>
</head>

<body>

    <div id="loading">
        <img src="__IMG__/one_shot/loading.gif">
    </div>

    <div id="view" class="view">

    </div>

    <script src="__JS__/one_shot/jquery.min.js"></script>
    <script src="__JS__/one_shot/preLoad.js"></script>
    <script src="__JS__/one_shot/three.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
    <script>
        $(function () {

            // 预加载
            var preLoad = new PreLoad({
                images: [
                    '__IMG__/one_shot/bg.png',
                    '__IMG__/one_shot/1/1.png',
                    '__IMG__/one_shot/2/1.png',
                    '__IMG__/one_shot/2/2.png',
                    '__IMG__/one_shot/2/3.png',
                    '__IMG__/one_shot/3/1.png',
                    '__IMG__/one_shot/3/2.png',
                    '__IMG__/one_shot/4/1.png',
                    '__IMG__/one_shot/4/2.png',
                    '__IMG__/one_shot/4/3.png',
                    '__IMG__/one_shot/4/4.png',
                    '__IMG__/one_shot/4/5.png',
                    '__IMG__/one_shot/4/6.png',
                    '__IMG__/one_shot/4/7.png',
                    '__IMG__/one_shot/5/1.png',
                    '__IMG__/one_shot/5/2.png',
                    '__IMG__/one_shot/6/1.png',
                    '__IMG__/one_shot/7/1.png',
                    '__IMG__/one_shot/8/1.png',
                    '__IMG__/one_shot/9/1.png',
                    '__IMG__/one_shot/9/2.png',
                    '__IMG__/one_shot/9/3.png',
                    '__IMG__/one_shot/10/1.png',
                    '__IMG__/one_shot/10/2.png',
                    '__IMG__/one_shot/10/3.png',
                ],
                loaded: function () {
                    setTimeout(function () {
                        $('#loading').hide();
                    }, 0);
                }
            })

            var g_Y = 0; // 点击屏幕时的 Y坐标
            var g_Y_distance = 0; // 保存上一次滑动点与起始点的距离 Y坐标上

            // 设置透明背景
            var renderer = new THREE.WebGLRenderer({
                alpha: true
            });

            var windowW = $(window).get(0).innerWidth;
            var windowH = $(window).get(0).innerHeight;

            console.log('windowW:' + windowW);
            console.log('windowH:' + windowH);

            renderer.setSize(640, 1237);
            document.getElementById('view').appendChild(renderer.domElement);

            var scene = new THREE.Scene();

            // 相机的参数
            var cameraOptions = {
                fov: 150,
                near: 1,
                far: 1000,
                x: 0,
                y: 0,
                z: 165
            }

            // 相机的位置
            var cameraX = cameraOptions.x;
            var cameraY = cameraOptions.y;
            var cameraZ = cameraOptions.z;

            /**
             * PerspectiveCamera(fov, aspect, near, far) 
             * fov 可视角度
             * aspect 为width/height，通常设置为canvas元素的高宽比。
             * near近端距离
             * far远端距离
             * 只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。
             **/

            var camera = new THREE.PerspectiveCamera(cameraOptions.fov, 640 / 1237, cameraOptions.near, cameraOptions.far);
            camera.position.set(cameraX, cameraY, cameraZ);
            // camera.lookAt(scene.position); // 相机朝向的位置

            // 聚光灯光源
            var ambientLight = new THREE.AmbientLight("#0c0c0c");
            scene.add(ambientLight);

            /**
             * 加载数据
             **/
            var imgDistance = 200;

            drawImg('__IMG__/one_shot/1/1.png', 0, 0, 0, 667, 1237);

            drawImg('__IMG__/one_shot/2/1.png', 0, -300, -imgDistance * 1, 642 * 0.5, 547 * 0.5);
            drawImg('__IMG__/one_shot/2/2.png', 0, 50, -imgDistance * 2, 609, 772);
            drawImg('__IMG__/one_shot/2/3.png', 0, 0, -imgDistance * 3, 918, 1028);

            drawImg('__IMG__/one_shot/3/1.png', 0, 0, -imgDistance * 4, 1462, 657);
            drawImg('__IMG__/one_shot/3/2.png', 0, 300, -imgDistance * 5, 739, 647);

            drawImg('__IMG__/one_shot/4/1.png', 0, 0, -imgDistance * 6, 1840, 1112);
            drawImg('__IMG__/one_shot/4/2.png', 0, 0, -imgDistance * 7, 1311, 1810);
            drawImg('__IMG__/one_shot/4/3.png', 0, 0, -imgDistance * 8, 1611, 1385);
            drawImg('__IMG__/one_shot/4/4.png', 0, 0, -imgDistance * 9, 1591, 467);
            drawImg('__IMG__/one_shot/4/5.png', 0, 0, -imgDistance * 10, 1834, 1566);
            drawImg('__IMG__/one_shot/4/6.png', 0, 0, -imgDistance * 11, 787, 193);
            drawImg('__IMG__/one_shot/4/7.png', 0, 0, -imgDistance * 12, 1836, 977);

            drawImg('__IMG__/one_shot/5/1.png', 0, 0, -imgDistance * 13, 642, 1237);
            drawImg('__IMG__/one_shot/5/2.png', 0, 0, -imgDistance * 14, 3071, 2349);

            drawImg('__IMG__/one_shot/6/1.png', 0, -50, -imgDistance * 15, 640, 1236);

            drawImg('__IMG__/one_shot/7/1.png', 50, 200, -imgDistance * 16, 640, 1236);

            drawImg('__IMG__/one_shot/8/1.png', 0, 0, -imgDistance * 17, 639, 1235);

            drawImg('__IMG__/one_shot/9/1.png', -20, -40, -imgDistance * 19, 642, 1236);
            drawImg('__IMG__/one_shot/9/2.png', 0, 0, -imgDistance * 19.1, 1942, 1129);
            drawImg('__IMG__/one_shot/9/3.png', 0, 0, -imgDistance * 20, 642, 1237);

            drawImg('__IMG__/one_shot/10/1.png', -30, 0, -imgDistance * 21, 640, 1236);
            drawImg('__IMG__/one_shot/10/2.png', 0, -180, -imgDistance * 22, 640, 1236);
            drawImg('__IMG__/one_shot/10/3.png', 0, 0, -imgDistance * 23, 640, 668);

            render();

            /**
             * 数据加载方法
             **/

            // 添加素材
            function drawImg(url, positionX, positionY, positionZ, imgWidth, imgHeight) {

                // 获取纹理里面的图片 这个不同的版本会有不同的方法 
                var loader = new THREE.TextureLoader();
                loader.load(url, function (texture) {

                    // 创建几何体 这里是平面  宽960 高480 上面的网格是1 
                    var geometry = new THREE.PlaneGeometry(imgWidth, imgHeight, 1, 1);

                    // 几何体创建纹理坐标 好像是四个角
                    geometry.vertices[0].uv = new THREE.Vector2(0, 0);
                    geometry.vertices[1].uv = new THREE.Vector2(1, 0);
                    geometry.vertices[2].uv = new THREE.Vector2(1, 1);
                    geometry.vertices[3].uv = new THREE.Vector2(0, 1);

                    // 创建材质 里面加纹理 因为上面的纹理里面有图片 所以相当于在材质上面贴图片
                    // 注意括号里面的map，map里面放上面下载到的纹理（这里是图片）对象
                    var material = new THREE.MeshBasicMaterial({
                        map: texture,
                        transparent: true
                    });

                    // 创建网格平面 需要几何图形和材质 
                    var mesh = new THREE.Mesh(geometry, material);

                    // 设置图片的位置
                    mesh.position.set(positionX, positionY, positionZ);
                    scene.add(mesh);
                })

            }

            // 循环渲染, 用于处理异步加载, 比如加载图片
            function render() {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }

            /**
             * 手势监听
             **/

            var el = document.getElementsByTagName("canvas")[0];
            el.addEventListener("touchstart", handleStart, false);
            el.addEventListener("touchend", handleEnd, false);
            el.addEventListener("touchcancle", handleCancle, false);
            el.addEventListener("touchmove", throttle(handleMove, 20, 50), false);
            
            function throttle(func, wait, mustRun) {
                var timeout,
                    startTime = new Date();

                return function() {
                    var context = this,
                        args = arguments,
                        curTime = new Date();

                    clearTimeout(timeout);
                    // 如果达到了规定的触发时间间隔，触发 handler
                    if (curTime - startTime >= mustRun) {
                        func.apply(context, args);
                        startTime = curTime;
                        // 没达到触发间隔，重新设定定时器
                    } else {
                        timeout = setTimeout(func, wait);
                    }
                };
            };

            function handleStart(e) {
                e.preventDefault();
                // 全局保存触碰屏幕时的y坐标
                g_Y = e.changedTouches[0].screenY;
            }

            function handleEnd(e) {
                e.preventDefault();
                // 手指离开屏幕时重置全局变量
                g_Y = 0;
                g_Y_distance = 0;
            }

            function handleCancle(e) {
                e.preventDefault();
                // 异常情况，比如弹出alert框，重置全局变量
                g_Y = 0;
                g_Y_distance = 0;
            }

            function handleMove(e) {
                e.preventDefault();
                // 获取移动时点在屏幕上的坐标
                var nowY = e.changedTouches[0].screenY;
                // 计算此次滑动与起始点的距离
                var distance = Math.abs(nowY - g_Y);
                // 判断上滑还是下滑
                if ((nowY - g_Y) < 0) {
                    // 比较相邻两次滑动的距离 以判断滑动方向
                    if (distance >= g_Y_distance) {
                        console.log('up');
                        if (cameraZ <= -10000) return;
                        cameraZ = cameraZ - 10;
                        camera.position.set(0, 0, cameraZ);
                    } else {
                        console.log('down');
                        if (cameraZ >= cameraOptions.z) return;
                        cameraZ = cameraZ + 10;
                        camera.position.set(0, 0, cameraZ);
                    }
                }
                if ((nowY - g_Y) > 0) {
                    if (distance >= g_Y_distance) {
                        console.log('down');
                        if (cameraZ >= cameraOptions.z) return;
                        cameraZ = cameraZ + 10;
                        camera.position.set(0, 0, cameraZ);
                    } else {
                        console.log('up');
                        if (cameraZ <= -10000) return;
                        cameraZ = cameraZ - 10;
                        camera.position.set(0, 0, cameraZ);
                    }
                }

                if (cameraZ < 0) {
                    renderer.setClearColor('rgba(135,206,250, 0)', 1.0);
                } else {
                    renderer.setClearColor('rgba(135,206,250, 0)', 0);
                }

                console.log('cameraZ:' + cameraZ);
                // 保存此次距离
                g_Y_distance = distance;
            }

            // 阻止浏览器webview的拖动
            document.body.addEventListener('touchmove', function (e) {
                e.preventDefault();
            })


            // 自适应屏幕大小
            //  document.addEventListener('resize', onResize, false);

            function onResize() {
                // 设置透视相机的长宽比
                camera.aspect = window.innerWidth / window.innerHeight;
                // 摄像机的 position 和 target 是自动更新的，而 fov、aspect、near、far 的修改则需要重新计算投影矩阵（projection matrix）
                camera.updateProjectionMatrix();
                // 设置渲染器输出的 canvas 的大小
                renderer.setSize(window.innerWidth, window.innerHeight);
            }

        })
    </script>
</body>

</html>